<template>
	<view class="index p10 f16">
		<view class="card">
			<view class="dfbc pb10 bb1">
				<view class="dfa">
					<u-avatar :src="src" shape="circle"></u-avatar>
					<view class="f-e-c ml10">
						<text class="c3 f16">{{user.name}}</text>
						<text class="f12 c9 mt5">{{user.phone}}</text>
					</view>
				</view>
				<view class="button_color" :style="{color:subColor,border:'1px solid'+subColor}">他的订单</view>
			</view>
			<view class="dfbc pt10">
				<view class="f-c-s">
					<text>1307.50</text>
					<text class="mt5 c6 f14">余额</text>
				</view>
				<view class="f-c-s">
					<text>5877</text>
					<text class="mt5 c6 f14">积分</text>
				</view>
				<view class="f-c-s">
					<text>235.50</text>
					<text class="mt5 c6 f14">已消费</text>
				</view>
			</view>
		</view>
		<view class="card mt10">
			桌位号：<text class="c0 wei6">堂食</text>
		</view>
		<view class="card mt10">
			<view class="c0 wei6">1种商品，共<text style="color:#e8b040">1</text>件</view>
			<view class="f-s-bt p-10-0" v-for="(item,index) in goods" :key="index">
				<view class="dfa">
					<u-avatar :src="src" shape="square"></u-avatar>
					<view class="f-e-c ml10">
						<text class="c3 f16">{{item.name}}</text>
						<text class="f12 c9 mt5">{{item.tags}}</text>
					</view>
				</view>
				<view class="tar">
					<view class="tar ml45">
						<view>￥15.40</view>
						<text class="f12 c9" style="text-decoration: line-through;">￥22.00</text>
					</view>
					<text>x1</text>
					<view class="mt10">
						<view class="button_common mr10">更多操作</view>
						<view class="button_color" :style="{color:subColor,border:'1px solid'+subColor}">退菜</view>
					</view>
				</view>
			</view>
			<view class="card mb10" style="background-color: #f6f6f6;">
				<view>备注</view>
				<view>无</view>
			</view>
			<view class="dfbc p-10-0 bb1" style=":border-top: 1px solid #f6f6f6;">
				<text class="cf f14" style="background: #aaa;padding:4rpx;border-radius: 4rpx;">未支付</text>
				<view class="">
					<text class="cf5f mr10">已优惠￥8.00</text>
					<text>小计￥</text>
					<text class="f20 c0 wei6">22.00</text>
				</view>
			</view>
			<view class="tar">
				总计￥<text class="f20 co wei6">22.00</text>
			</view>
		</view>
		<view class="card dfbc mt10">
			<text>会员优惠</text>
			<text class="cf5f">-￥4.50</text>
		</view>
		<view class="card mt10">
			<view class="dfbc p-5-0">
				<text>订单状态</text>
				<text>未支付</text>
			</view>
			<view class="dfbc p-5-0">
				<text>订单类型</text>
				<text>堂食</text>
			</view>
			<view class="dfbc p-5-0">
				<text>桌位号</text>
				<text>堂食</text>
			</view>
			<view class="dfbc p-5-0">
				<text>就餐人数</text>
				<text>0</text>
			</view>
			<view class="dfbc p-5-0">
				<text>支付方式</text>
				<text></text>
			</view>
			<view class="dfbc p-5-0">
				<text>预约时间</text>
				<text></text>
			</view>
			<view class="dfbc p-5-0">
				<text>下单时间</text>
				<text>2023-05-08 11:22:54</text>
			</view>
			<view class="dfbc p-5-0">
				<text>订单编号</text>
				<text>20230508112255098745</text>
			</view>
			<view class="dfbc p-5-0">
				<text>商家备注</text>
				<text class="button_color" :style="{color:subColor,border:'1px solid'+subColor}">编辑</text>
			</view>
		</view>
		<view class="card mt10">
			<view v-for="(item,index) in note" :key="index" :style="{color:index===0?subColor:'#999'}">
				<view class="dfa">
					<view style="width:15rpx;height:15rpx;border-radius: 50%;"
						:style="{background:index===0?subColor:'#999'}"></view>
					<text class="f14 ml10">{{item.time}}</text>
				</view>
				<view class="f-s">
					<view :style="{background:index===0?subColor:'#999'}" v-if="index!==note.length-1"
						style="width:2rpx;height:80rpx;margin-left: 6rpx;"></view>
					<text class="mt5 f16 ml10" :class="index==note.length-1?'pl10':''">{{item.cont}}</text>
				</view>
			</view>
		</view>
		<view class="buts dfa tac">
			<view class="w100 f16 cf p10">加菜
			</view>
			<view class="w100 f16 cf p10">结账</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				src: '',
				user: {
					name: '阿卡丽',
					phone: '18674859685'
				},
				goods: [{
					id: 0,
					name: '香芒耶耶',
					tags: '正常冰/少糖',
					num: 1,
					disPrice: '15.40',
					price: '22.00',
				}, {
					id: 1,
					name: 'natie',
					tags: '热',
					num: 1,
					disPrice: '15.20',
					price: '19.00',
				}],
				note: [{
					time: '2023-05-08 11:23',
					cont: '123打印'
				}, {
					time: '2023-05-08 10:23',
					cont: '测试'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		padding-bottom: 160rpx;
		overflow: auto;

		.buts {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			height: 90rpx;
			background: linear-gradient(to right, #383433 50%, #49c265 50%);
			border-radius: 50rpx;
		}
	}
</style>